<template>
  <div class="pd-15 height-per-100 inform-detail-container width-percent-100">
    <el-empty description="暂无数据" v-if="!inform.id"></el-empty>
    <ul v-if="!edit && inform.id">
      <li>
        <span>通知标题：{{ inform.title }}</span>
        <el-button icon="el-icon-edit" type="primary" size="mini" @click="informDialog.visible=true">修改</el-button>
      </li>
      <li>
        <span>发送时间：{{ $dayjs(inform.creationTime * 1).format('MM-DD hh:mm:ss') }}</span>
      </li>
      <li>
        <span>概述：{{ inform.overview }}</span>
      </li>
    </ul>

    <InformForm :data="informDialog" :editData="inform"/>
  </div>
</template>

<script>


export default {
  name: "InformDetail",
  props: ['activityIndex', 'informIndex'],
  mounted() {

  },
  data() {
    return {
      informDialog: {
        title: '修改通知',
        visible: false
      },
    }
  },
  methods: {},
  computed: {
    inform() {
      let activity = this.$store.state.activity.activities[this.activityIndex] || {}
      return activity.informs ? activity.informs[this.informIndex] : {}
    }
  }
}
</script>

<style scoped lang="scss">
.inform-detail-container {
  border-left: 2px solid #dadada;

  ul {
    list-style: none;
    display: flex;
    flex-flow: column nowrap;

    li {
      padding: 10px;

      &:first-child {
        display: flex;
        flex-flow: row nowrap;
        justify-content: space-between;
        align-items: center;
        font-size: 38px;
        width: 100%;
      }
    }
  }
}
</style>